$font:12px;
$bg:#CFCFCF;
$bianjie:1px solid #C7C7C7;
$wigthmin:0px;
$heightmin:0px;
$widthmax:1200px;
$f6f6f6:#f6f6f6;
*{
    list-style: none;
    text-decoration: none;
}
.red{
    color:red;
}
.green{
    color:green;
}
header{
    width:100%;
    height:30px;
    background:$bg;
    position: relative;
    #hdleft{
        width:244px;
        height:30px;
        float:left;
        ul{
            width:100%;
            height:30px;
            margin:0;
            li{
                margin-right:5px;
                line-height:30px;
                float:left;
            }
        }
        
    }
    #hdright{
        width:544px;
        height:30px;
        float:right;
        ul{
            width:100%;
            height:30px;
            margin:0;
            li{
                margin-right:5px;
                line-height:30px;
                float:left;
            }
        }
    }
}
nav{
    width:100%;
    img{
       width:201px;
       height:73px;
        float:left;
    }
    
    #nav-right{
       margin-left: 588px;
       height:73px;
        ul{
            width:70%;
            height:73px;
            float:right;
            margin:0;
            li{
                float:left;
                line-height:73px;
                line-height: 30px;
                margin: 20px 17px;
                height: 30px;
               &:hover{
                   background:#ccc;
               }
                a{
                     color:grey;
                }
            }
        }
    }
}

#dl{
    display: none;
    width: 462px;
    height: 344px;
    border: 1px solid #ccc;
    margin: 20px 485px;
    position: fixed;
    z-index: 2;
    background: white;
    #title{
        width:462px;
        height:55px;
        position: relative;
        span{
            position: absolute;
            right:10px;
            top:10px;
        }
    }
    #dl1{
        width:462px;
        height:289px;
      p{
          margin:37px;
      }  
      button{
          width:264px;
          height:37px;
          background: green;
          color:white;
          font-weight:bold;
          text-align: center;
          margin-left:69px;
      }
      input{
          width:263px;
          height:36px;
          
      }
    }
    
}
#zc{
    display: none;
    width: 544px;
    height:348px;
    border: 1px solid #ccc;
    margin: 20px 485px;
    position: fixed;
    z-index: 2;
    background: white;
  }
#zccontent{
        width:543px;
        height:290px;
       }
#zctit{
        width:543px;
        height:55px;
        position: relative;
        span{
            position: absolute;
            right:10px;
            top:20px;
        }
    }
#zcleft{
           width:145px;
           height:290px;
           background:#ffffff; 
           float: left;
            p{
                width:145px;
                height:50px;
              background-color:#a6deef;
              color:white;
              text-align: center;
              margin: 30px 0 0px 0;
              img{
                  margin:10px 10px;
              }
            }
        }
@mixin zcyemian{
        width:375px;
        height:290px;
        float:right;
        border-left: 1px solid #ccc;
}  
@mixin zcp{
    margin:10px 0;
}
@mixin zcinput{
    margin:15px;
}
#zcright{
        @include zcyemian;
        
        p{
            @include zcp;
            input{
                margin:15px; 
            }
        }
    }

    
#zcright-1{
    @include zcyemian;
    display:none;
    p{
            @include zcp;
            input{
                 @include zcinput 
            }
        }
}
#lunbo{
    width:1200px;
    height:340px;
    margin: 0 auto;
    position: relative;
    .ll{
        img{
            width: 100%;
        }
    }
    #banner-hz{
        height:340px;
        width:235px;
        background:rgba(73,72,70,0.5);
        position: absolute;
        top:0;
        left:0;
        padding: 0;
        li{
           color:white;
           line-height:84px; 
           text-align: center;
           border-bottom:1px white solid;
           display: flex;
           justify-content: space-around;
           align-items: center;
           width: 100%;
           &:hover{
               background:green;
           }
        }
    }
}
//tab
#xsj{width:700px ;height: 338px;
        background:lightgray;
        position: absolute;
        left: 305px;top: 0px;
        z-index: 15;
        display: none;
        p{
           span{
               display: inline-block;
               margin-left:10px;
           } 
        }
}
#xdn{width:700px ;height: 338px;
        background:lightgray;
        position: absolute;
        left: 305px;top: 0px;
        z-index: 15;
        display: none;
        }
#msj{width:700px ;height: 338px;
        background:lightgray;
        position: absolute;
        left: 305px;top: 0px;
        z-index: 15;
        display: none;
        p{margin:20px auto;width: 90%;height:80%;display: flex;flex-wrap: wrap;align-content: space-around;
             span{display: inline-block;width: 100px;height: 30px;text-align: center;line-height: 30px;margin-left: 20px;
                    border: 1px solid gray;}
            }
        }
#messj{width:700px ;height: 338px;
        background:lightgray;
        position: absolute;
        left: 305px;top: 0px;
        z-index: 15;
        display: none;
        p{margin:20px auto;width: 90%;height:80%;display: flex;flex-wrap: wrap;align-content: space-around;
             span{display: inline-block;width: 100px;height: 30px;text-align: center;line-height: 30px;margin-left: 20px;
                    border: 1px solid gray;}
            }
        }      
#xdn1{width:90%;height:40%;display: flex;align-items: center;justify-content: space-around;
        p{width: 60%;height: 100%;margin: 0;
            display: flex;flex-wrap: wrap;align-content: space-around;
            span{display: inline-block;width: 100px;height: 30px;text-align: center;line-height: 30px;margin-left: 20px;
                    border: 1px solid gray;}
          }
       }
#xdn2{width:90%;height:50%;display: flex;align-items: center;justify-content: space-around;
        p{width: 60%;height: 100%;margin: 0;
            display: flex;flex-wrap: wrap;align-content: space-around;
            span{display: inline-block;width: 100px;height: 30px;text-align: center;line-height: 30px;margin-left: 20px;
                    border: 1px solid gray;}
          }
        }

@mixin marginauto{
  margin: 0 auto;
}
@mixin floatLeft{
  float: left;
}
@mixin fontsizeBig{
  font-size: 22px;
}
@mixin fontsizelitter {
    font-size: 12px;
}
@mixin fontsizemiddle{
  font-size: 16px;
}
@mixin fontsizeSmall{
  font-size: 14px;
}
#main{
  width: 100%;
  height: 950px;
  background-color: #f7f7f7;
}
#sort{
  @include marginauto;
  width: $widthmax;
}
.sortUls li {
  width: 299px;
  height: 166px;
  @include floatLeft;
  border-right: solid 1px #cccccc;
}
.sortUls{
    width: 1300px;
    height: 166px;
    margin: 0 -38px;
}
#recycle,#recycle2{
  width: $widthmax;
  @include marginauto;
}

#recycleIphone,#recycleIphone2{
  margin-top: 10px;
  line-height: 50px;
  @include fontsizeBig;
  color: #444444;
  display: flex;
  justify-content: space-between;
}
.more{
  @include fontsizelitter;
}
#recycleMain,#recycleMain2{
  display: flex;
}
.firstImg{
  font-size: 0;
}
#iphoneImg,#iphoneImg2{
  font-size: 0;
}
#service{
  padding-top: 10px;
  line-height: 60px;
  @include fontsizeBig;
  width: $widthmax;
  @include marginauto
}
.serchAdd{
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
}    

.maps{
    width:103px;
    height:30px;
    float: right;
    margin: -48px 34px 0 0;
    background: #fff;
    border: 1px solid #DBDBDB;
    display: inline-block;
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    padding: 0 0 32px 11px;
    img{
        width:16px;
        height:28px;
    }
}
#shopmain_left{
  width: 890px;
  margin-left: 96px;
}
.checkcity,.checkAdd{
  margin-right: 10px;
  padding-left: 20px;
  cursor: pointer;
  width: 120px;
  height: 40px;
  border: solid 1px green;
  line-height: 40px;
}
.textAdd{
  padding-left: 20px;
  width: 570px;
  height: 40px;
  border: solid 1px green;
  display: flex;
}
.textInput{
  border: 0;
  width: 460px;
  line-height: 40px;
  @include  fontsizemiddle;
}
.textBtn{
  border: 0;
  background-color: green;
  width: 120px;
  color: white;
  @include fontsizemiddle;
}
.ranking{
    margin-top: 20px;
    margin-left: 8px;
    width: 874px;
    height: 42px;
    background-color: #f7f7f7;
    padding: 0;
}
.ranking span{
  line-height: 42px;
}
.ranking li{
  @include floatLeft;
  width: 120px;
  height: 40px;
  line-height: 40px;
  border: solid 1px #d6d6d6;
  text-align: center;
  margin-right: 9px;
}
.serchMain{
  display: flex;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 913px;
  border: 1px solid #ccc;
  border-bottom: solid 1px #cccccc;
}
.serchLeft{
  display: flex;
  position: relative;
  margin: 21px 10px;
}
.serchImg img{
  width: 90px;
  height: 90px;
}
.shopName{
  line-height: 30px;
  @include  fontsizeSmall;
}
.shopli1{
  margin-top: 10px;
 }
.shopInfo{
  @include fontsizeSmall;
  margin: -2px 15px;
  li{
      width:399px;
     
      overflow: hidden;
  }
  
}
.shopli1 span{
  margin-left: 15px;
}
.shopli1 span img{
  margin-left: 5px;
}
.shopli2{
  margin-top: 15px;
}
.shopli3{
  margin-top: 5px;
}
//.moods{
//height: 15px;
//margin-top: 75px;
//}
.shopIn{
    text-align: center;
    border: solid 1px green;
    width: 139px;
    height: 40px;
    line-height: 40px;
    font-weight: 500;
    margin-top: 40px;
    position: absolute;
    left:656px;
    display:none;
}
#shopmain{
    display:flex;
}
#shopmain_right{
    margin-left: 131px;
    margin-top: 17px;
    height: 555px;
    width: 272px;
    border: 1px solid #D6D6D6;
    font-size: 14px;
}
.hpb{
    border-top: 1px solid #E6E6E6;
    color: #666;
    height: 90px;
    padding: 20px 0;
 }
 .pic{
    border: 1px solid #E6E6E6;
    float: left;
    margin-right: 6px;
    margin-top: 13px;
    img{
        width:32px;
        height:32px;
    }
 }
 .cont{
    float: left;
    overflow: hidden;
    width: 150px;
    margin-top: -6px
 }
 .cont-list{
    margin: 0;
    padding: 0;
 }
 .red_1{
    float: left;
    font-size: 26px;
    height: 52px;
    line-height: 52px;
    margin: 0;
    text-align: center;
    width: 56px;
    margin-top: 3px;
 }
 .green{
    height: 26px;
    line-height: 26px;
    margin-bottom: 4px;
    overflow: hidden;
 }
.shopTop{
    background: #F7F7F7;
    color: #333;
    font-size: 20px;
    height: 42px;
    line-height: 42px;
    margin: 0;
    padding: 0;
    text-align: center;
}
#footer{
  margin-top: 15px;
  width: 100%;
  height: 290px;
  background-color: #fafafa;
  border-top: solid 1px #cccccc;
}
#footercenter{

  width: 980px;
  @include marginauto;
}
.footTop{
  display: flex;
  justify-content: space-around;
  padding-bottom: 30px;
  border-bottom: solid 1px #cccccc;
}
.footlist{
  margin-top: 15px;
  display: flex;
}
.footlist img{
    width: 45px;
    height: 43px;
}
.footuls{
  margin-top: 6px;
  margin-left: 5px;
}
.footlis1{
  @include fontsizemiddle;
  font-family: "黑体";
  line-height: 35px;
  font-weight: 800;
  color: #777777;
}
.footlis2{
  @include fontsizelitter;
  color: #777777;
  line-height: 22px;
  font-weight: 500;
  font-family: "黑体";
}
.footBottom{
  margin-top: 20px ;
}
.footBottom div{
  width: 480px;
  @include marginauto;
  color: #777777;
  @include fontsizelitter;
  text-align: center;
}
.help {
  padding-top: 1px;
  cursor: pointer;
  border: solid 1px black;
  background-color: white;
  width: 85px;
  height: 80px;
  span a {
    @include fontsizelitter;
    cursor: pointer;
    line-height: 25px;
    display: block;
    border: 0;
  }
}
.help1{
  border:solid 1px transparent ;
  @include fontsizelitter;
  color: #7f7f7f;
  cursor: pointer;
  height: 30px;
  width: 85px;
  overflow: hidden;

}
.smallsj{
  display: inline-block;
  width: 0;
  height: 0;
  border-left: solid 4px transparent;
  border-right: solid 4px transparent;
  border-top: solid 4px #000066;
}
.smallsj1{
  display: inline-block;
  width: 0px;
  height: 0px;
  border-left: solid 4px transparent;
  border-right: solid 4px transparent;
  border-bottom: solid 4px #000066;
}
//CityList
#jsCityList{
    background:#fbfbfb;
    display:none;
    font-size:12px;
    position:absolute;
    width: 460px;
    z-index:10;
    left: 152.047px;
    top: 26px;
    opacity: 1;
    #top{
            background: none;
            border: 1px solid #cfcfcf;
            border-bottom: 0;
            height: 3px;
            overflow: hidden;
    }
    #content{
        border: 1px solid #cfcfcf;
        border-width: 0 1px;
         h3{
            font-weight: 400;
            height: 20px;
            line-height: 20px;
            font-size: 100%;
            padding: 0 10px;
            position: relative;
            .cityclose{
                background-position: 0 -7px;
                cursor: pointer;
                display: block;
                height: 20px;
                line-height: 100px;
                /* overflow: hidden; */
                position: absolute;
                right: -25px;
                top: -42px;
                width: 55px;
            }
        }
        #CityList{
                background: #fff;
                border: 1px solid #e8e8e8;
                margin: 5px 10px 0;
                padding: 12px 12px 0;
                ul{
                    list-style: none;
                    margin-left: -45px;
                     li{
                         margin-bottom: 10px;
                            padding-left: 40px;
                            position: relative;
                            vertical-align: top;
                            zoom: 1;
                            h4{
                                color: #666;
                                left: 0;
                                position: absolute;
                                top: 2px;
                                font-size: 100%;
                                font-weight: 400;
                            }
                            p{
                                line-height: 18px;
                                margin: 0;
                                 padding: 0;
                                 a{
                                     display: inline-block;
                                        height: 18px;
                                        line-height: 18px;
                                        margin: 0 10px 2px 0;
                                        color:#000;
                                 }
                            }
                     }                
                }
                .er{
                    .spell{
                        border-bottom: 1px solid #d9d9d9;
                        height: 23px;
                        margin-bottom: 5px;
                        width: 100%;
                        a{
                            float: left;
                            font-size: 14px;
                            
                            height: 23px;
                            line-height: 20px;
                            text-align: center;
                            text-transform: uppercase;
                            -webkit-text-transform: uppercase;
                            -ms-text-transform: uppercase;
                            width: 16px;
                            text-decoration: none;
                        }
                    }
                }
        }
    }
    #bottom{
        background: none;
        border: 1px solid #cfcfcf;
        border-top: 0;
        background-position: 0 -3px;
        height:17px;
        overflow: hidden;
    }
}
//online customer service
#mainbox{
    display:none;
    width: 320px;
    height: 480px;
    position: absolution;
   
    position: absolute;
    z-index: 3;
    left: 900px;
    top: 29px;
    #zcchat{
        /* border: 1px solid transparent; */
        border: none;
        overflow: hidden;
        position: relative;
        border: solid 1px #d9d9d9;
        /* height:100%; */
       #header{
           position:relative;
           span{
               position: absolute;
               right: 5px;
               top: 10px;
               text-align: right;
           }
       }
       #chatpane{
            height: 313px;
            overflow-y: auto;
            overflow-x: hidden;
            height: 315px;
            width: auto;
            padding: 0;
            margin-right: -20px;
            color: #333;
            position: relative;
            .chatPanelList{
                width: 319px;
                min-height: 315px;
                box-sizing: border-box;
                overflow: hidden;
                margin: 0;
                padding: 0 20px 10px;
                font-size: 12px;
                min-height: 306px;
                max-width: 323px;
                background-color: #FFFFFF;
                .magBox{
                    margin: 20px 0;
                    position: relative;
                   .leftName{
                        font-size: 14px;
                        color: #858282;
                        margin-bottom: 10px;
                    }
                    .msgDiv{
                        padding: 10px;
                        background-color: #f0f0f0;
                        border-radius: 2px;
                        display: inline-block;
                        position: relative;
                        max-width: 80%;
                        min-height: 20px;
                        .msgText{
                            width: 100%;
                            font-size: 14px;
                            line-height: 20px;
                            padding: 0;
                            margin: 0;
                            word-wrap: break-word;
                            display: inline-block;
                            overflow: hidden;
                            p{
                                padding: 0;
                                word-wrap: break-word;
                                line-height: 20px;
                                padding: 0;
                                margin: 0;
                                font-size: 14px;
                            }
                        }
                    }
                     .msgDiv:before{
                        width: 0px;
                        position: absolute;
                        top: 12px;
                        left: -12px;
                        border-style: solid;
                        border-color: transparent #f0f0f0;
                        border-width: 0 12px 12px 0;
                        content: "";
                    }
                }
            }
    
        }
        #footer{
                width:100%;
                margin-top: -9px;
                background: #fff;
                display: block;
                height: 105px;
                border-top: 1px solid #d9d9d9;
                box-sizing: border-box;
                .text-layout{
                    margin: 0 10px;
                    .text{
                        width: 100%;
                        height: 40px;
                        margin: 5px 0 0;
                        padding: 0;
                        border: 0;
                        color: #999;
                        resize: none;
                        font-size: 12px;
                    }
                }
                .powBox{
                    position: relative;
                    width: 100%;
                    height: 24px;
                    .pow{
                            color: #d5d4d4;
                            font-size: 12px;
                            position: absolute;
                            bottom: 0;
                            left: 10px;
                            display: inline-block;
                        }
                        .send-btn{
                                color: rgb(255, 255, 255);
                                background: rgb(28, 177, 137);
                                position: absolute;
                                right:-245px;
                                bottom: 0;
                                margin: 0;
                                padding: 0;
                                cursor: pointer;
                                border: none;
                                width: 60px;
                                height: 24px;
                                border-radius: 2px;
                                font-size: 12px;
                        }
                }
        }
    }   
}
.panel{
    background: #fff;
    overflow: hidden;
    z-index: 99;
    display: none;
    z-index: 10001;
    left: 463px;
    top: 160px;
    box-shadow: 0 0 10px #666;
    position: absolute;
    text-align: left;
    .panel-content {
        zoom: 1;
        .hd{
            h3{
                border-bottom: 1px solid #e1e1e1;
                color: #888;
                font-size: 14px;
                font-weight: 700;
                height: 31px;
                line-height: 32px;
                margin: 0 1px;
                text-indent: 14px;
            }
        }
        .ft{
            height: 50px;
            line-height: 50px;
            text-align: center;
            .panel-btn{
                font-size: 14px;
                font-weight: 700;
                height: 36px;
                margin-right: -66px;
                padding: 0 0 1px;
                text-align: center;
                width: 113px;
                line-height: 36px;
            }
        }
    }
}
#container{
    span{
        font-size: 20px;
        position: absolute;
        top: 10px;
        z-index: 1;
        right: 10px;
    }
}
#mappages{
    width:603px;
    height:640px;
    border:1px #000 solid;
    position:fixed;
    top:0;left:300px;
    z-index: 2;
    display:none;
    background:white;
}
